<template>
    <div>
        <div class="new-footer">
            <div class="new-footer-content">
                <div class="footer-hd-con">
                    <div class="footer-hd">
                        <ul class="footer-type-tab">
                            <li @click="selectClick(index)" :class="active == index ? 'active' : ''"
                                v-for="(item, index) in footerNavArr" :key="index">{{ item.title }}</li>
                        </ul>
                        <ul class="type-content-list" style="display:flex;">
                            <li v-for="(child, child_key) in footerNavArr[active]['children']" :key="child_key"
                                v-if="footerNavArr[active]"><a :href="child.url" target="_blank">{{ child.title }}</a>
                            </li>
                        </ul>

                    </div>
                </div>
                <div class="footer-bd">
                    <div class="bd-left">
                        <ul v-for="(item1, index1) in footerOtherNavArr" :key="index1">
                            <li>{{ item1['title'] }}</li>
                            <li v-if="item1['children']" v-for="(item2, index2) in item1['children']" :key="index2"> <a
                                    :href="item2['url']" target="_blank">{{ item2.title }}</a></li>
                        </ul>
                    </div>
                    <div class="bd-right">
                        <div class="official-account">
                            <div class="official-account-img">
                                <img :src="siteConf.wx_img"
                                    style="width: 100px;height: 100px;border-radius: 4px; margin-bottom: 12px;">
                            </div>
                            <div>微信公众号</div>
                        </div>
                        <div class="small-routine">
                            <div class="small-routine-img">
                                <img :src="siteConf.wx_img"
                                    style="width: 100px;height: 100px;border-radius: 4px; margin-bottom: 12px;">
                            </div>
                            <div>小程序</div>
                        </div>
                    </div>
                </div>
                <div class="line"></div>
                <div class="copyright">
                    <p>{{ siteConf.sm }}</p>
                    <p>Copyright © 2024 - 2025 All rights reserved. {{siteConf.site_name }} ©版权所有 <a
                            href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank" rel="nofollow">{{
                                siteConf.record_number }} </a> {{
                                    siteConf.site_name }}</p>
                </div>
            </div>
        </div>
        <div v-if="buttons.length > 0">
            <rigthbtn :buttons="buttons"></rigthbtn>
        </div>

    </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { getFooterNav, helpBtn } from "../api/home/index";
const active = ref(0)
import { useSiteConfig } from '../stores/siteConfig'
import { Service, Top, Plus } from '@element-plus/icons-vue';
import rigthbtn from './rigthBtn.vue'
const siteConf = useSiteConfig()
const selectClick = (index: any) => {
    active.value = index
}

const buttons = ref([])
//数据源
const helpBtnData = () => {
    helpBtn({}).then((res: any) => {
        if (res.code == 1) {
            buttons.value = res.data
        }
    })
}

//获取底部导航数据
const footerNavArr = ref<any>([]);
//获取底部导航数据
const footerOtherNavArr = ref<any>([]);
const getFooterNavList = () => {
    getFooterNav().then((res: any) => {
        if (res.code === 1) {
            footerNavArr.value = res.data.list.result;
            footerOtherNavArr.value = res.data.list.other;
        }
    });
}
onMounted(() => {
    helpBtnData()
    getFooterNavList()
})
</script>
<style scoped></style>